<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>在box元素中动态创建无序列表，自定义列表项内容。</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        ul {
            list-style: none;
        }
    </style>
</head>
<body>
    <h2>学生:</h2>
    <ul id="stu">
        
    </ul>
    <script>
        let student = ["张三","李四","王二麻子","王五","狗子"];
        let stu = document.getElementById("stu");
        let stu_li = [];
        for(let i = 0;i<student.length;i++){
            stu_li[i] = document.createElement("li");
            stu_li[i].innerText = student[i];
            stu.appendChild(stu_li[i]);
        }
        stu.onmouseover = mouse;
        stu.onmouseout = mouse;
        function mouse(e){
            e = e || window.event;
            if(e.type =="mouseover") {
                for(let i = 0;i<stu_li.length;i++){
                    stu_li[i].style.backgroundColor = "white";
                }
                e.target.style.backgroundColor = "pink";
            }
            if(e.type =="mouseout") {
                e.target.style.backgroundColor = "white";
            }
            
        }
    </script>
</body>
</html>